<template>
    <div>
        <!-- 进度条区 -->
        <el-steps :space="300" :active="activeIndex - 0" finish-status="success" align-center>
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品标签"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="商品出售" v-if="showEdit"></el-step>
        </el-steps>

        <!-- tab栏区 -->
        <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="100px"
            label-position="top">
            <el-tabs :tab-position="'left'" v-model="activeIndex">
                <el-tab-pane label="基本信息" name="0">
                    <el-form-item label="商品名称" prop="name">
                        <el-input v-model="addFrom.name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="price">
                        <el-input v-model="addFrom.price" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品规格" prop="size">
                        <el-input v-model="addFrom.size"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="Piece">
                        <el-input v-model="addFrom.Piece" type="number"></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
                <el-tab-pane label="商品标签" name="2">
                    <el-row :gutter="20">
                        <el-col :span=8>
                            <el-input type="textarea" :rows="4" placeholder="请输入其他标签内容,用逗号隔开" v-model="addproductLabel"></el-input>
                        </el-col>
                        <el-col :span=2>
                            已经有的商品标签,您可以点击添加:
                        </el-col>
                        <el-col :span=8>
                            <!-- 展示已有的商品添加标签 -->
                            <el-checkbox-group v-model="productLabel" size="small" class="selectCheckboxGroup">
                                <el-checkbox-button v-for="city in cityOptions" :label="city" :disabled="city === '马'" :key="city">{{city}}</el-checkbox-button>
                            </el-checkbox-group>
                        </el-col>
                    </el-row>
                    <el-row>
                        您已给此商品加的标签
                        <el-checkbox-group size="small" disabled class="checkboxGroupShow">
                            <el-checkbox-button v-for="label in totalProductLabel" :label="label" :key="label">{{label}}</el-checkbox-button>
                        </el-checkbox-group>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="商品图片" name="3">
                    <el-upload action="" list-type="picture-card" :auto-upload="false" multiple
                    :on-error="handleSuccess" :file-list="uploadFilesList">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                    <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <!-- action图片要上传到的完整的api地址 -->
                    <!-- <el-upload action=""
                    :on-preview="handlePreview" :on-remove="handleRemove"
                    list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload> -->
                </el-tab-pane>
                <el-tab-pane label="商品内容" name="4">
                    <!-- 富文本编辑器 -->
                    <quill-editor v-model="addFrom.prodetail" ref="myQuillEditorRef" :options="editorOption"
                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)">
                    </quill-editor>

                    <!-- 添加商品的按钮 -->
                    <el-button v-if="!addFrom.havedSold" type="primary" class="btnAdd" @click="addProduct">添加商品</el-button>
                </el-tab-pane>
                <el-tab-pane label="商品出售" name="5" v-if="showEdit">
                    <!-- 商品已售出的按钮 -->
                    <div v-if="!addFrom.havedSold">
                        <el-button type="primary" class="btnAdd" @click="addFrom.havedSold = true">商品已出售</el-button>
                    </div>
                    <div v-else>
                        <el-form-item label="售出方式" prop="dealType">
                            <el-input v-model="addFrom.dealType"></el-input>
                        </el-form-item>
                        <el-form-item label="售出价格" prop="dealPrice">
                            <el-input v-model="addFrom.dealPrice" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="买家姓名" prop="buyerName">
                            <el-input v-model="addFrom.buyerName"></el-input>
                        </el-form-item>
                        <el-form-item label="买家地址" prop="address">
                            <el-input v-model="addFrom.address"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remarks">
                            <el-input v-model="addFrom.remark"></el-input>
                        </el-form-item>
                    </div>
                    <!-- 添加商品的按钮 -->
                    <el-button v-if="addFrom.havedSold" type="primary" class="btnAdd" @click="addProduct">添加商品</el-button>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </div>
</template>

<script>
export default {
    props:["proInfo","showEdit"],
    data(){
        return {
            activeIndex : "0",
            //添加商品的表单数据
            addFrom : this.proInfo,
            addFromRules : {
                name : [{required:true,message:"请输入商品名称",trigger:'blur'}],
                price : [{required:true,message:"请输入商品价格",trigger:'blur'}], 
                Piece : [{required:true,message:"请输入商品数量",trigger:'blur'}], 
                size : [{required:true,message:"请输入商品规格",trigger:'blur'}],
                dealType : [{required:true,message:"请输入出售类型",trigger:'blur'}],
                dealPrice : [{required:true,message:"请输入售出价格",trigger:'blur'}], 
                buyerName : [{required:true,message:"请输入买家名字",trigger:'blur'}], 
                address : [{required:true,message:"请输入买家地址",trigger:'blur'}] 
            },
            cityOptions : ['玉石', '木头', '泥雕', '佛像' , '马'], //已经添加过的商品标签
            addproductLabel : "",
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            uploadFilesList : [],
            editorOption : {},
            productLabel : []
        }
    },
    created (){
    },
    computed: {
        // 计算属性的 getter
        totalProductLabel: function () {
            if(this.addproductLabel){
                return this.productLabel.concat(this.addproductLabel.split(","))
            }else{
                return this.productLabel
            }
        }
    },
    methods :{
        //添加商品的表格

        //处理移除图片的操作
        handleRemove(file){

        },
        //处理图片预览效果
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
            console.log(this.uploadFilesList);
        },
        //上传成功的事件
        handleSuccess(response, file, fileList){
            console.log("response",response)
            console.log("file",file)
            console.log("fileList",fileList)
        },
        onEditorBlur(){

        },
        onEditorFocus(){

        },
        onEditorReady(){

        },
        // 添加商品
        addProduct(){
            //预验证~商品是否已经填写完
            this.$refs.addFromRef.validate(valid => {
                if(!valid){
                    return this.$msg.error("填写必要的表单项")
                }
            })

            //深拷贝addFrom数据
            const form = _.cloneDeep(this.addFrom)
        },
        productHavedSold (){

        }
    }
}
</script>

<style lang="less" scope>
.btnAdd{
    margin-top: 15px;
}
</style>